<template>
    <div class="console">
        <!--百度地图容器-->
        <section  class="dialogSearch">
            <el-input
                style="margin-bottom: 10px"
                v-model="searchData1"
                placeholder="请输入地址"
                @input="getLoal"
            >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </section>
        <section>
            <el-row style="display: flex; width: 900px; height: 450px" :gutter="20">
                <el-col :span="18">
                    <div
                        style="width: 100%; height: 100%; border: #ccc solid 1px"
                        id="dituContent"
                    ></div>
                </el-col>
                <el-col :span="6">
                    <section style="height: 450px; overflow-y: auto">
                        共搜索到{{ total }}个地址
                        <section class="addressItem" v-for="item in addressDetails">
                            <section
                                style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px"
                            >
                                {{ item.title }}
                            </section>
                            <section style="margin-left: 10px">
                                <el-button type="primary" @click="getlngAndlat(item.point)"
                                >确定
                                </el-button
                                >
                            </section>
                        </section>
                    </section>
                </el-col>
            </el-row>
        </section>

        <el-dialog :title="title" v-dialogDrag :visible.sync="dialogTableVisible">
            <!-- <img
                width="500px"
                v-if="index === 1"
                height="300px"
                src="~@/assets/img/zjs.png"
            />
            <img
                width="500px"
                v-if="index === 2"
                height="300px"
                src="~@/assets/img/xwh.png"
            /> -->
        </el-dialog>
    </div>
</template>
<script>
    // 引入富文本编辑器所需样式
    import {MP} from "./map.js";

    export default {
        props: {
            searchData: {
                type: String,
                default: "",
            },
        },
        watch: {
            searchData(val) {
                this.searchData1 = val;
            },
        },
        data() {
            return {
                ak: "QK0pfr9rXGlLKAPf3q6Y4br71I8RW6DH", // 正式线上项目，务必替换成自己的key
                dialogTableVisible: false,
                BMap: null,
                map: null,
                title: "",
                imgUrl: "",
                index: 1,
                lngAndlat: [],
                addressDetails: [],
                total: 0,
                searchData1: "",
            };
        },
        mounted() {
            let _this = this;
            MP(this.ak).then((BMap) => {
                // 百度地图API功能
                _this.BMap = BMap;
                _this.initMap();
            });
        },
        methods: {
            //得到经纬度
            getlngAndlat(point) {
                this.$emit("getlngAndlat", point);
                console.log(point);
            },
            getLoal() {
                this.createMap();
            },
            initMap() {
                // 百度地图API功能
                this.createMap(); // 创建地图
                this.setMapEvent(); // 设置地图事件
                this.addMapControl(); // 向地图添加控件
                //this.addMarker(this.markerArr1); // 向地图中添加marker
            },
            createMap() {
                var map = new this.BMap.Map("dituContent"); // 在百度地图容器中创建一个地图
                var point = new this.BMap.Point(116.404, 39.915); // 定义一个中心点坐标
                map.centerAndZoom(point, 14); // 设定地图的中心点和坐标并将地图显示在地图容器中
                // map.setMapStyleV2({
                //   styleId: '44ce7d9e957f49e0f17ccee298d7bdd4'
                // })
                this.map = map; // 将map变量存储在全局
                let that = this;
                var myGeo = new BMap.Geocoder({extensions_town: true});
                var local = new BMap.LocalSearch(this.map, {
                    renderOptions: {map: this.map},
                    onSearchComplete: function (results) {
                        // 需要获取当前搜索总共有多少条结果
                        if (!results) {
                            return;
                        }
                        console.log(results);
                        var totalResults = results.getNumPois();
                        console.log(results);
                        // myGeo.getPoint('山西省太原市小店区南中环街529号', function(point){
                        //       if(point){
                        //         that.lngAndlat.push(point)
                        //         console.log(that.lngAndlat)

                        //       }else{
                        //           // alert('您选择的地址没有解析到结果！');
                        //       }
                        // }, '山西省')
                        that.addressDetails = [];
                        that.total = results.Br.length;
                        that.addressDetails = that.addressDetails.concat(results.Br)

                        console.log(that.addressDetails)
                        for (let index = 0; index < results.Br.length; index++) {
                            //that.addressDetails.push(result);
                            // 根据坐标得到地址描述
                            //
                            // myGeo.getLocation(
                            //   new BMap.Point(
                            //     results.Ar[index].point.lng.toString(),
                            //     results.Ar[index].point.lat.toString()
                            //   ),
                            //   function (result) {
                            //     if (result) {
                            //       that.addressDetails.push(result);
                            //       console.log(result);
                            //     }
                            //   }
                            // );
                        }
                    },
                });
                local.search(that.searchData1);
            },
            setMapEvent() {
                this.map.enableDragging(); // 启用地图拖拽事件，默认启用(可不写)
                this.map.enableScrollWheelZoom(); // 启用地图滚轮放大缩小
                this.map.enableDoubleClickZoom(); // 启用鼠标双击放大，默认启用(可不写)
                this.map.enableKeyboard(); // 启用键盘上下左右键移动地图
            },
            addMapControl() {
                // 向地图中添加缩放控件
                var ctrlMav = new this.BMap.NavigationControl({
                    anchor: window.BMAP_ANCHOR_TOP_LEFT,
                    type: window.BMAP_NAVIGATION_CONTROL_LARGE,
                });
                this.map.addControl(ctrlMav);
                // 向地图中添加缩略图控件
                var ctrlOve = new this.BMap.OverviewMapControl({
                    anchor: window.BMAP_ANCHOR_BOTTOM_RIGHT,
                    isOpen: 1,
                });
                this.map.addControl(ctrlOve);
                // 向地图中添加比例尺控件
                var ctrlSca = new this.BMap.ScaleControl({
                    anchor: window.BMAP_ANCHOR_BOTTOM_LEFT,
                });
                this.map.addControl(ctrlSca);
            },
            addMarker(markerArr) {
                let _this = this;
                for (var i = 0; i < markerArr.length; i++) {
                    var json = markerArr[i];
                    var p0 = json.point.split("|")[0];
                    var p1 = json.point.split("|")[1];
                    var point = new this.BMap.Point(p0, p1);
                    var iconImg = this.createIcon(json.icon);
                    var marker = new this.BMap.Marker(point, {icon: iconImg});
                    let jsonx = this.createInfoWindow(i, markerArr);
                    var label = new this.BMap.Label(json.title, {
                        offset: new this.BMap.Size(json.icon.lb - json.icon.x + 10, -20),
                    });
                    marker.setLabel(label);
                    this.map.addOverlay(marker);
                    label.setStyle({
                        borderColor: "#808080",
                        color: "#333",
                        cursor: "pointer",
                    });
                    (function () {
                        var index = i;
                        jsonx = _this.createInfoWindow(i, markerArr);
                        var _marker = marker;
                        _marker.addEventListener("click", function () {
                            _this.open(index, jsonx);
                        });

                        label.addEventListener("click", function () {
                            _this.open(index, jsonx);
                        });
                        if (json.isOpen) {
                            label.hide();
                        }
                    })();
                }
            },
            createInfoWindow(i, markerArr) {
                var json = markerArr[i];

                return json;
            },
            open(index, json) {
                this.dialogTableVisible = true;
                this.index = index + 1;
                this.title = json.title;
                this.imgUrl = json.content;
            },
            createIcon(json) {
                var icon = new this.BMap.Icon(
                    "http://map.baidu.com/image/us_mk_icon.png",
                    new this.BMap.Size(json.w, json.h),
                    {
                        imageOffset: new this.BMap.Size(-json.l, -json.t),
                        infoWindowOffset: new this.BMap.Size(json.lb + 5, 1),
                        offset: new this.BMap.Size(json.x, json.h),
                    }
                );
                return icon;
            },
        },
    };
</script>

<style lang='scss' scoped>
    .addressItem {
        margin-top: 15px;
        width: 100%;
        height: 100px;
        border: 1px solid #cccccc;
    }

    .article-box {
        width: 100%;

        .el-pagination {
            margin-top: 20px;
        }

        .quill-editor {
            height: 300px;
            margin-bottom: 20px;
        }
    }
    .dialogSearch{
        ::v-deep .el-input{
            width: 300px;
            .el-input__inner{
                width: inherit;
            }
        }
    }
</style>
